<template>
  <section class="aee">
    <div class="title">
      <h2>{{ floor.name }}</h2>
      <ul>
        <li v-for="(item, index) in floor.navList" :key="index">
          <a class="active">{{ item.text }}</a>
        </li>
      </ul>
    </div>
    <div class="content">
      <div class="float content1">
        <div class="top">
          <ul>
            <li v-for="(item, index) in floor.keywords" :key="index">
              <a class="active">{{ item }}</a>
            </li>
          </ul>
        </div>
        <img :src="floor.imgUrl" :alt="floor.imgUrl" />
      </div>
      <div class="float content2">
        <Swiper :imagelist="floor.carouselList" />
      </div>
      <div class="float content3">
        <img :src="floor.recommendList[0]" />
        <img :src="floor.recommendList[1]" />
      </div>
      <div class="float content4">
        <img :src="floor.bigImg" />
      </div>
      <div class="float content5">
        <img :src="floor.recommendList[2]" />
        <img :src="floor.recommendList[3]" />
      </div>
    </div>
  </section>
</template>

<script>
import Swiper from "../../../components/Swiper";

export default {
  name: "Floor",
  props: {
    floor: Object,
  },
  components: {
    Swiper,
  },
};
</script>

<style></style>
